<template>
	<view :class="[device.lang,'c_box']">
		<view class="box rtl">
			<view class=" bar-h" :style="`background: ${device.MyShop.shopBackgroundColor};`">

			</view>
			<view class="head " :style="`background: ${device.MyShop.shopBackgroundColor};`">
				<view class="head_type">
					<view class="flip" @click="Back">
						<uv-icon name="arrow-left" size="25" color="#fff"></uv-icon>
					</view>
					<view class="">
						{{t("Crazy Saturday")}}
					</view>
					<view class="">
					</view>
				</view>
				<view class="head_icon">
					<view class="">
						<image class="icon"
							:src="timeType == 0 ?'/static/images/special/startTime.png':'/static/images/special/over.png'"
							mode="widthFix"></image>
						<!-- <image class="icon" src="/static/images/timestart.png" mode="widthFix"></image> -->
					</view>

					{{t(timeType==0?"Time to start":"Time to end")}}
					<view class="grade">
					</view>
				</view>
				<view class="times">
					<view class="time_bg">
						{{ countdown.Hour }}h
					</view>:
					<view class="time_bg">
						{{ countdown.minute }}m
					</view>:
					<view class="time_bg">
						{{ countdown.second }}s
					</view>
				</view>
			</view>
			<view class="cart-box">
				<view class="cart">
					<view class="cart-item" v-for="(item,i) in dataList" @click="detail(item,i)">
						<view class="cart-item-tip">
							#{{i+1}}
						</view>
						<view class="cart-item-box">
							<view class="cart-head">
								<view class="">
									<view class="cart-head-title">
										{{item.oe}}
									</view>
									<view class="cart-head-tip">
										{{item.productName}}
									</view>
								</view>
								<view class="icon">
									<uv-icon v-if="item.quantity<=0" name="shopping-cart" size="25"></uv-icon>
									<view class="cart_btn" v-if="item.quantity>0">
										{{item.quantity}}
									</view>
								</view>
							</view>
							<view class="cart-content">
								<view class="cart-content-img">
									<image class="img" :src="item.firstPicture" mode="widthFix"></image>
								</view>
								<view class="">
									<view class="cart-price">
										<view class="cart-price-left">
											{{item.productPrice}}
										</view>
										<view class="cart-price-rigth">
											{{item.promotionPrice}} SAR
										</view>
									</view>
									<view class="cart-price-time">
										{{t("limit of ")}}{{item.businessPurchaseLimit}} {{t("units")}}
									</view>
								</view>
							</view>

						</view>

					</view>
				</view>
			</view>
			<view class="footer">

				<view class="tip">
					{{orderDetailList.length}} {{t("items")}}
					<!-- , {{t("VAT")}}:0.00 SAR -->
				</view>
				<view class="container">
					<view class="">
						{{t("Total")}}: {{Number(TotalPrice).toFixed(2)}} SAR
					</view>
					<view class="goto " @click="addCart">
						{{t("Check out")}}
						<uv-icon class="flip" name="arrow-right" size="18" color="#fff"></uv-icon>
					</view>
				</view>
			</view>

		</view>
		<Model ref="goodsModel" :title="title" @Confrm="goodsConfrm">
			<view class="rtl">
				<view class="swiper">
					<image :src="goodsDetail.firstPicture" mode="widthFix"></image>
				</view>
				<view class="p_name">
					<view class="img">
					</view>
					<view class="">
						<view class="">
							{{goodsDetail.productName}}
						</view>
						<view class="good-year">
							{{goodsDetail.year}}
						</view>
					</view>

				</view>
				<view class="goods-num">
					<view class="goods-sum" @click="()=>{num>1?num--:''}">
						-
					</view>
					<view class="input">
						{{num}}
					</view>
					<view class="goods-sum" @click="()=>{num<dataList[goodsIndex].businessPurchaseLimit?num++:''}">
						+
					</view>
				</view>
			</view>
		</Model>

	</view>

</template>

<script setup>
	import {
		useI18n
	} from "vue-i18n";
	import {
		ref,
		onMounted
	} from "vue"
	import {
		HomeAPI,
		CartAPI
	} from "@/api";
	import {
		useAuthStore,
		useDeviceStore
	} from "@/store";
	const {
		t
	} = useI18n();

	const device = useDeviceStore()
	const title = ref("");
	const num = ref(1)
	const dataList = ref([]);
	const goodsModel = ref();
	const goodsDetail = ref({});
	const goodsIndex = ref(-1)
	const orderDetailList = ref([])
	const TotalPrice = ref(0)
	const specialDetal = ref(null)
	const timeType = ref(-1)
	const countdown = ref({
		Hour: 0,
		minute: 0,
		second: 0
	})


	onMounted(() => {
		let data = uni.getStorageSync("special")
		specialDetal.value = data
		console.log(data, "specialDetal")
		MyTime(specialDetal.value)
		queryActivity()
	})


	const addCart = async () => {
		let resolve = []
		dataList.value.forEach((item) => {
			if (item.quantity > 0) {
				resolve.push(CartAPI.addCart({
					"shopId": device.MyShop.id,
					"carMake": 2,
					"oeList": [item.oe],
					"quantity": item.quantity,
					"activityTime": specialDetal.value.dactivityTime
				}, "special"))
			}
		})
		await Promise.all(resolve)

		uni.navigateTo({
			url: "/pages/carMark/index"
		})

	}
	const queryActivity = async () => {
		let res = await HomeAPI.getMyActivityDetails()
		res.forEach(item => {
			item.quantity = 0
		})
		dataList.value.push(...res)

	}
	const detail = (data, index) => {
		goodsIndex.value = index;
		goodsDetail.value = data;
		title.value = data.oe;
		console.log(data)
		goodsModel.value.control(true)
	}
	const countTotalPrice = () => {
		const item = dataList.value[goodsIndex.value]
		item.quantity = num.value;
		console.log(Number(TotalPrice.value), (item.productPrice * num.value))
		TotalPrice.value = (Number(TotalPrice.value) + (item.productPrice * num.value)).toFixed(2)
	}
	const goodsConfrm = (data) => {
		console.log(data)
		orderDetailList.value.push({
			"oe": dataList.value[goodsIndex.value].oe,
			"quantity": num.value
		})
		countTotalPrice()
		num.value = 1;
		goodsModel.value.control(false)
	}

	const Back = () => {
		uni.navigateBack()
	}


	const MyTime = (data) => {
		if (isStartTime(data.startActivityTime)) {
			timeType.value = 0;
			const bool = countdownstart(data.startActivityTime)
			if (bool) {
				return
			}
		}
		if (isOverTime(data.dactivityTime)) {
			timeType.value = 1;
			countdownstart(data.dactivityTime)
		}

	}

	const isStartTime = (time) => {
		return new Date().getTime() < new Date(time).getTime()
	}
	const isOverTime = (time) => {
		return new Date().getTime() < new Date(time).getTime()
	}
	const countdownstart = (time) => {

		countdown.value = getCountdown(time)
		if (countdown.value.Hour > 0 || countdown.value.minute > 0 || countdown.value.second > 0) {
			setTimeout(() => {
				countdownstart(time)
			}, 1000); // 每秒更新一次
			return true
		} else {
			console.log('倒计时结束！');
		}
	}

	function getCountdown(endDate) {
		// 获取当前时间
		const now = new Date().getTime();

		// 将结束时间转换为毫秒
		const end = new Date(endDate).getTime();

		// 计算时间差（毫秒）
		const timeDiff = end - now;

		// 如果时间差小于等于0，说明已经到达或超过了结束时间
		if (timeDiff <= 0) {
			return {
				Hour: 0,
				minute: 0,
				second: 0
			};
		}

		// 计算小时、分钟和秒
		const Hour = Math.floor(timeDiff / (1000 * 60 * 60));
		const minute = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
		const second = Math.floor((timeDiff % (1000 * 60)) / 1000);

		return {
			Hour,
			minute,
			second

		};
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/index.scss";

	.box {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.head {
		padding: 20rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background: #267a58;
		border-radius: 0 0 30rpx 30rpx;

		.head_type {
			width: 100%;
			padding: 10rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.head_icon {
			padding: 50rpx;
			width: 200rpx;
			position: relative;

			.icon {
				width: 50rpx;
				display: block;
				margin: 0 auto;
				padding: 10rpx 0;
			}

			.grade {

				position: absolute;
				top: 20rpx;
				left: 50%;
				transform: translateX(-50%);
				font-size: 62px;
			}
		}
	}

	.cart-box {
		flex: 1;
		overflow-y: scroll;

		.cart {
			margin: 0 20rpx;
			padding-bottom: 20rpx;

			.cart-item {
				margin-top: 20rpx;

				.cart-item-tip {
					font-size: 24rpx;
				}

				.cart-item-box {
					// 
					background: #fff;
					border-radius: 10rpx;
					padding: 10rpx;

					.cart-head {
						display: flex;
						justify-content: space-between;

						.cart-head-title {
							font-size: 28rpx;
						}

						.cart-head-tip {
							font-size: 24rpx;
							color: #dfdfdf;
						}
					}

					.cart-content {
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						padding-top: 20rpx;

						.cart-content-img {
							width: 150rpx;

							.img {
								width: 100%;
							}
						}

						.cart-price {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							padding: 10rpx 0;

							.cart-price-left {
								margin-right: 10rpx;
								color: #ccc;
								position: relative;
							}

							.cart-price-left::after {
								content: "";
								position: absolute;
								left: 0%;
								top: 50%;
								transform: translateY(-50%);
								height: 1px;
								background: #a6a6a6;
								width: 120%;
							}

							.cart-price-rigth {
								color: #db7858;
							}
						}

						.cart-price-time {
							color: #ccc;
							font-size: 24rpx;
						}
					}
				}

			}
		}
	}

	.footer {
		background: $primary-b;
		padding: 20rpx 20rpx 40rpx;
		border-radius: 20rpx 20rpx 0 0;
		// 
		// 
		// 
		color: #fff;

		.tip {
			font-size: 22rpx;
			color: #dcdcdc;
		}

		.container {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.goto {
			display: flex;
			align-items: center;
		}
	}

	.goods-num {
		display: flex;
		align-items: center;
		// border: 1px solid #ccc;
		border-radius: 10rpx;
		width: 300rpx;
		text-align: center;
		margin: 20rpx auto;

		.input {
			border: 1px solid #ccc;
			border-left: none;
			border-right: none;
			width: 40%;
			height: 80rpx;
			line-height: 80rpx;

		}

		.goods-sum {
			border: 1px solid #ccc;
			width: 30%;
			height: 80rpx;
			line-height: 80rpx;

			border-radius: 0 10rpx 10rpx 0;
		}

		.goods-sum:nth-child(1) {
			border-radius: 10rpx 0 0 10rpx;
		}

	}

	.swiper {
		padding: 10rpx;

		image {
			width: 80%;
			display: block;
			margin: 0 auto;
		}
	}

	.p_name {
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 10px;
		margin: 10rpx;
		display: flex;

		.img {
			width: 30%;
		}

		.good-year {
			color: #a6a6a6;
		}
	}

	.cart_btn {
		width: 100rpx;
		background: $primary-b;
		height: 50rpx;
		border-radius: 10rpx;
		color: #fff;
		text-align: center;
		line-height: 50rpx;
	}

	.times {
		display: flex;
		align-items: center;
		padding-bottom: 40rpx;

		.time_bg {
			background: #eceff5;
			border-radius: 90rpx;
			padding: 1rpx 25rpx;
			margin: 0 10rpx;
			color: red;
			font-size: 28rpx;
		}
	}
</style>